<!--
*******************************************************************************
 * Copyright © 2021-2022 VMware, Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License. You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under the License
 * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing permissions and limitations under
 * the License.
 *
 * @author: Huaqiao Zhang, <huaqiaoz@vmware.com>
 *******************************************************************************
 -->

 <div class="combo-shielder" *ngIf="visible" (click)="close($event)"></div>
 <div class="combo">
    <div class="input-group has-validation" (click)="toggle($event)">
        <input type="text" class="form-control" name="selectedInterval" readonly="readonly" maxlength="0" [(ngModel)]="selectedInterval.name" [class.is-invalid]="!selectedInterval.name && validate" [class.is-valid]="selectedInterval.name && validate" required>
        <div class="input-group-append">
            <span class="input-group-text" role="button"><i class="fa fa-chevron-down"></i></span>
        </div> 
        <div id="validationIntervalNameFeedback" class="invalid-feedback">
            <small>the interval name can't be empty!</small> 
        </div>
    </div>
    <div [style.display]="!visible ? 'none': ''" class="combo-body shadow rounded">
        <app-interval-list 
        (singleIntervalSelectedEvent)="onSingleIntervalSelected($event)"
        [singleIntervalSelected]="selectedInterval"
        [enableSelectAll]="false"
        [toolbars]="false"
        ></app-interval-list>
    </div>
 </div>
